import React, { PureComponent } from 'react';
import {
  Button,
  Checkbox,
  Modal,
  DatePicker,
  Flex,
  InputItem,
  List,
  Picker,
  Radio,
  Stepper,
  TextareaItem,
  Toast,
  WhiteSpace, Icon, NavBar,
} from 'antd-mobile';
import { connect } from '@@/plugin-dva/exports';
// @ts-ignore
import { createForm } from 'rc-form';
import './index.less';
import { Direction } from '@/services/searchParam';
import moment from 'moment';
import * as api from '@/services/api';
import { history } from 'umi';

// @ts-ignore
@connect(({ global, publish }) => ({ global, publish }))
class Form extends PureComponent {
  state = {
    // @ts-ignore
    site: '',
    startPoint: '',
    agree: false,
  };
  constructor(props: any) {
    super(props);
    const { start, end } = localStorage;
    siteInfo = [
      { value: 0, label: start },
      { value: 1, label: end },
    ];
  }

  siteChange(value: string) {
    this.setState({ site: value });
  }

  onSubmit = () => {
    // @ts-ignore
    this.props.form.validateFields({ force: true }, error => {
      const { startPoint, agree } = this.state;
      if (!error && startPoint && agree) {
        // @ts-ignore
        let params = this.props.form.getFieldsValue();
        params.entity = params.entity[0];
        // @ts-ignore
        params.direction = localStorage.getItem('start') === startPoint ? Direction.STARTOEND : Direction.ENDTOSTART;
        params.departureTime = moment(params.departureTime).format(
          'YYYY-MM-DD HH:mm:ss',
        );
        params.phone = params.phone.replace(new RegExp(/ /g), '');
        // @ts-ignore
        params.routeId = this.props.global.id;
        api.addPublish(params).then(res => {
          if (res.success) {
            Toast.success('发布成功！', 1);
            history.goBack();
          } else {
            Modal.alert(
              '提示',
              '您在发布过程中遇到了一些问题，请重新打开后重试',
            );
          }
        });
      } else {
        Toast.info('请检查填写是否完整 !!!', 2, () => {}, false);
      }
    });
  };

  render(): any {
    // @ts-ignore
    const { getFieldProps, getFieldError } = this.props.form;

    return (
      <div>
        <NavBar
          mode="dark"
          icon={<Icon type="left" />}
          onLeftClick={() => history.goBack()}
        >发布信息</NavBar>
        <form className={'form'}>
          <List renderHeader={() => '始发地'}>
            {siteInfo.map((i: { value: number; label: string }) => (
              <Radio.RadioItem
                key={i.value}
                checked={this.state.site === i.label}
                onChange={() => {
                  this.siteChange(i.label);
                  this.setState({ startPoint: i.label });
                }}
              >
                {i.label}
              </Radio.RadioItem>
            ))}
          </List>

          <InputItem
            type={'text'}
            clear
            error={!!getFieldError('startRemarks')}
            {...getFieldProps('startRemarks', {
              rules: [{ required: true, message: '请填写始发地备注' }],
            })}
          >
            备注
          </InputItem>

          <List renderHeader={() => '目的地'}>
            {siteInfo.map((i: { value: number; label: string }) => (
              <Radio.RadioItem
                key={i.value}
                checked={this.state.site !== i.label && this.state.site !== ''}
                disabled
              >
                {i.label}
              </Radio.RadioItem>
            ))}
          </List>

          <InputItem
            type={'text'}
            clear
            error={!!getFieldError('endRemarks')}
            {...getFieldProps('endRemarks', {
              rules: [{ required: true, message: '请填写目的地备注' }],
            })}
          >
            备注
          </InputItem>

          <List renderHeader={() => '其他信息'}>
            <Picker
              data={[
                { value: 'PEOPLE', label: '人找车' },
                { value: 'CAR', label: '车找人' },
              ]}
              cols={1}
              // @ts-ignore
              value={this.state.entity}
              error={!!getFieldError('entity')}
              {...getFieldProps('entity', {
                rules: [{ required: true, message: '请选择拼车方式' }],
              })}
            >
              <List.Item arrow="horizontal">拼车方式</List.Item>
            </Picker>

            <InputItem
              type="phone"
              pattern="11[0-9]*"
              placeholder="请输入手机号"
              error={!!getFieldError('phone')}
              {...getFieldProps('phone', {
                rules: [{ required: true, message: '请输入手机号' }],
              })}
            >
              手机号码
            </InputItem>

            <DatePicker
              value={new Date(Date.now())}
              {...getFieldProps('departureTime', {
                rules: [{ required: true, message: '请输入手机号' }],
              })}
            >
              <List.Item arrow="horizontal">出发时间</List.Item>
            </DatePicker>

            <List.Item
              wrap
              extra={
                // @ts-ignore
                <Stepper
                  style={{ width: '100%', minWidth: '100px' }}
                  showNumber={true}
                  step={'1'}
                  max={7}
                  min={1}
                  value={1}
                  {...getFieldProps('seatNumber', {
                    rules: [{ required: true, message: '请输入座位数' }],
                  })}
                />
              }
            >
              车辆座位
            </List.Item>
          </List>

          <List renderHeader={() => '其他说明'}>
            <TextareaItem
              rows={3}
              placeholder="点击以输入..."
              {...getFieldProps('remarks')}
            />
            <Checkbox.AgreeItem
              data-seed="logId"
              onChange={(e: any) => {
                this.setState({ agree: e.target.checked });
              }}
            >
              同意 <a>《用户使用协议》</a>
            </Checkbox.AgreeItem>
          </List>
          <List>
            <WhiteSpace size={'lg'} />
            <WhiteSpace size={'lg'} />
            <Flex>
              <Flex.Item> </Flex.Item>
              <Flex.Item>
                <Button type="primary" onClick={this.onSubmit}>
                  提交
                </Button>
              </Flex.Item>
              <Flex.Item> </Flex.Item>
            </Flex>
            <WhiteSpace size={'lg'} />
            <WhiteSpace size={'lg'} />
          </List>
        </form>
      </div>
    );
  }
}
let siteInfo: any = [];
const Publish = createForm()(Form);
export default Publish;
